<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="apple-mobile-web-app-capable" content="no" />
  <meta name="format-detection" content="telephone=no">
  <title>订单列表</title>
  <script src="static/scripts/cssrem.js"></script>
</head>

<body>
  <div class="content">
    <div class="wrapper">
      <!-- <div class="order-list"></div> -->
      <div class="order-list">
        <div class="order-item bgwh">
          <a class="g3" href="./order-detail.html">
            <div class="cell pt20 pb20">
              <div class="cell__bd f28 pl20 g3">订单编号:20177403050020</div>
              <div class="cell__fd b f26 text-danger">已完成</div>
            </div>
            <!-- 多款商品时显示 -->
            <div class="pt20 pb20 ui-1px-t order-swiper">
              <div class="swiper-container" style="white-space: nowrap;">
                <div class="swiper-wrapper">
                  <div class="swiper-slide photo100"><img src="../images/interim-goods.png" alt=""></div>
                  <div class="swiper-slide photo100"><img src="../images/interim-goods.png" alt=""></div>
                  <div class="swiper-slide photo100"><img src="../images/interim-goods.png" alt=""></div>
                  <div class="swiper-slide photo100"><img src="../images/interim-goods.png" alt=""></div>
                  <div class="swiper-slide photo100"><img src="../images/interim-goods.png" alt=""></div>
                  <div class="swiper-slide photo100"><img src="../images/interim-goods.png" alt=""></div>
                  <div class="swiper-slide photo100"><img src="../images/interim-goods.png" alt=""></div>
                </div>
              </div>
            </div>
          </a>
          <div class="cell pt20 pb20 ml20 ui-1px-t">
            <div class="cell__bd f28 g3"></div>
            <div class="cell__fd f26"><em class="g9 f24">实付款：</em><em class="g3 b f28">￥10000.00</em></div>
          </div>
        </div>
        <div class="order-item bgwh">
          <a class="g3" href="./order-detail.html">
            <div class="cell pt20 pb20">
              <div class="cell__bd f28 pl20 g3">订单编号:20177403050020</div>
              <div class="cell__fd b f26 text-danger">待付款</div>
            </div>
            <div class="cell pt20 pb20 ui-1px-t">
              <div class="cell__hd photo100 photo__goods"> <img src="../images/interim-goods.png" alt=""> </div>
              <div class="cell__bd f28 pl20 g3">
                <p class="f26">越南特级很厉害很甜纯天然无污染</p>
                <div class="clearfix pt10"> <span class="text-primary b l"><em class="f26">￥</em><em class="f30">17.8</em><em class="f26">万/吨</em></span>                  <span class="r f26 g9">×1</span> </div>
              </div>
              <div class="cell__fd b f26 text-danger"></div>
            </div>
          </a>
          <div class="cell pt20 pb20 ml20 ui-1px-t">
            <div class="cell__bd f28 g3"></div>
            <div class="cell__fd f26"><em class="g9 f24">实付款：</em><em class="g3 b f28">￥10000.00</em></div>
          </div>
          <div class="cell pt20 pb20 ml20 ui-1px-t">
            <div class="cell__bd f28 g3 tr"> <a class="btn dib f24 g3 mr20" href="./pay-detail.html">支付详情</a> <a class="btn dib f24 g3 mr20" href="javascript:;">确认付款</a>              </div>
          </div>
        </div>
        <div class="order-item bgwh">
          <a class="g3" href="./order-detail.html">
            <div class="cell pt20 pb20">
              <div class="cell__bd f28 pl20 g3">订单编号:20177403050020</div>
              <div class="cell__fd b f26 text-danger">待发货</div>
            </div>
            <div class="cell pt20 pb20 ui-1px-t">
              <div class="cell__hd photo100 photo__goods"> <img src="../images/interim-goods.png" alt=""> </div>
              <div class="cell__bd f28 pl20 g3">
                <p class="f26">越南特级很厉害很甜纯天然无污染</p>
                <div class="clearfix pt10"> <span class="text-primary b l"><em class="f26">￥</em><em class="f30">17.8</em><em class="f26">万/吨</em></span>                  <span class="r f26 g9">×1</span> </div>
              </div>
              <div class="cell__fd b f26 text-danger"></div>
            </div>
          </a>
          <div class="cell pt20 pb20 ml20 ui-1px-t">
            <div class="cell__bd f28 g3"></div>
            <div class="cell__fd f26"><em class="g9 f24">实付款：</em><em class="g3 b f28">￥10000.00</em></div>
          </div>
          <div class="cell pt20 pb20 ml20 ui-1px-t">
            <div class="cell__bd f28 g3 tr"> <a class="btn dib f24 g3 mr20" href="./transport.html">完善物流</a> </div>
          </div>
        </div>
        <div class="order-item bgwh">
          <a class="g3" href="#">
            <div class="cell pt20 pb20">
              <div class="cell__bd f28 pl20 g3">订单编号:20177403050020</div>
              <div class="cell__fd b f26 text-danger">待收货</div>
            </div>
            <div class="cell pt20 pb20 ui-1px-t">
              <div class="cell__hd photo100 photo__goods"> <img src="../images/interim-goods.png" alt=""> </div>
              <div class="cell__bd f28 pl20 g3">
                <p class="f26">越南特级很厉害很甜纯天然无污染</p>
                <div class="clearfix pt10"> <span class="text-primary b l"><em class="f26">￥</em><em class="f30">17.8</em><em class="f26">万/吨</em></span>                  <span class="r f26 g9">×1</span> </div>
              </div>
              <div class="cell__fd b f26 text-danger"></div>
            </div>
          </a>
          <div class="cell pt20 pb20 ml20 ui-1px-t">
            <div class="cell__bd f28 g3"></div>
            <div class="cell__fd f26"><em class="g9 f24">实付款：</em><em class="g3 b f28">￥10000.00</em></div>
          </div>
          <div class="cell pt20 pb20 ml20 ui-1px-t">
            <div class="cell__bd f28 g3 tr"> <a class="btn dib f24 g3 mr20" href="javascript:;">待收货</a> </div>
          </div>
        </div>
        <div class="order-item bgwh">
          <a class="g3" href="#">
            <div class="cell pt20 pb20">
              <div class="cell__bd f28 pl20 g3">订单编号:20177403050020</div>
              <div class="cell__fd b f26 text-danger">已取消</div>
            </div>
            <div class="cell pt20 pb20 ui-1px-t">
              <div class="cell__hd photo100 photo__goods"> <img src="../images/interim-goods.png" alt=""> </div>
              <div class="cell__bd f28 pl20 g3">
                <p class="f26">越南特级很厉害很甜纯天然无污染</p>
                <div class="clearfix pt10"> <span class="text-primary b l"><em class="f26">￥</em><em class="f30">17.8</em><em class="f26">万/吨</em></span>                  <span class="r f26 g9">×1</span> </div>
              </div>
              <div class="cell__fd b f26 text-danger"></div>
            </div>
          </a>
          <div class="cell pt20 pb20 ml20 ui-1px-t">
            <div class="cell__bd f28 g3"></div>
            <div class="cell__fd f26"><em class="g9 f24">实付款：</em><em class="g3 b f28">￥10000.00</em></div>
          </div>
        </div>
        <div class="order-item bgwh">
          <a class="g3" href="#">
            <div class="cell pt20 pb20">
              <div class="cell__bd f28 pl20 g3">订单编号:20177403050020</div>
              <div class="cell__fd b f26 text-danger">已完成</div>
            </div>
            <div class="cell pt20 pb20 ui-1px-t">
              <div class="cell__hd photo100 photo__goods"> <img src="../images/interim-goods.png" alt=""> </div>
              <div class="cell__bd f28 pl20 g3">
                <p class="f26">越南特级很厉害很甜纯天然无污染</p>
                <div class="clearfix pt10"> <span class="text-primary b l"><em class="f26">￥</em><em class="f30">17.8</em><em class="f26">万/吨</em></span>                  <span class="r f26 g9">×1</span> </div>
              </div>
              <div class="cell__fd b f26 text-danger"></div>
            </div>
          </a>
          <div class="cell pt20 pb20 ml20 ui-1px-t">
            <div class="cell__bd f28 g3"></div>
            <div class="cell__fd f26"><em class="g9 f24">实付款：</em><em class="g3 b f28">￥10000.00</em></div>
          </div>
        </div>
        <div class="order-item bgwh">
          <a class="g3" href="#">
            <div class="cell pt20 pb20">
              <div class="cell__bd f28 pl20 g3">订单编号:20177403050020</div>
              <div class="cell__fd b f26 text-danger">已退货</div>
            </div>
            <div class="cell pt20 pb20 ui-1px-t">
              <div class="cell__hd photo100 photo__goods"> <img src="../images/interim-goods.png" alt=""> </div>
              <div class="cell__bd f28 pl20 g3">
                <p class="f26">越南特级很厉害很甜纯天然无污染</p>
                <div class="clearfix pt10"> <span class="text-primary b l"><em class="f26">￥</em><em class="f30">17.8</em><em class="f26">万/吨</em></span>                  <span class="r f26 g9">×1</span> </div>
              </div>
              <div class="cell__fd b f26 text-danger"></div>
            </div>
          </a>
          <div class="cell pt20 pb20 ml20 ui-1px-t">
            <div class="cell__bd f28 g3"></div>
            <div class="cell__fd f26"><em class="g9 f24">实付款：</em><em class="g3 b f28">￥10000.00</em></div>
          </div>
        </div>
      </div>
      <div class="data-load-end f28 tc dn g6 pb20">数据已加载完成!</div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      loadDataSite()
    });
    var currentPage = 1;
    // 显示固定位置数据
    function loadDataSite() {
      var content = document.querySelector('.content')
      var state = history.state
      if (!!state && !!state.page) {
        var page = state.page
        var top = state.top
        loadLocalData(page, function () {
          content.scrollTop = top
          dropDownDoad(+page + 1)
        })
      } else {
        dropDownDoad(2)
      }
    }

    function loadLocalData(pages, callback) {
      var html = ''
      var list = document.querySelector('.order-list')
      axios({
        method: 'get',
        url: 'wap/transaction/ajaxList?page=' + currentPage,
      }).then(function (res) {
        // 成功获取数据
        var tfList = res.data.tfList;
        var num = res.data.size;
        for (var i = 0; i < tfList.length; i++) {
          html += template(tfList[i], currentPage)
        }
        list.insertAdjacentHTML('beforeend', html)
        currentPage += 1;
        if (parseInt(pages) < parseInt(currentPage)) {
          (callback && typeof (callback) === "function") && callback();
          return false;
        };
        loadLocalData(pages, callback)

      }).catch(function (err) {
        console.error(err)
      });

    }

    function dropDownDoad(minPage) {
      var content = document.querySelector('.content')
      var status = document.querySelector('.data-load-end')
      var list = document.querySelector('.order-list')
      var screenHeight, pageHeight, sTop, diff, remainder, isLoad = true, page = parseInt(minPage);
      screenHeight = content.clientHeight;
      pageHeight = content.children[0].offsetHeight;
      function init() {
        sTop = content.scrollTop;
        screenHeight = content.clientHeight;
        pageHeight = content.children[0].clientHeight;
        diff = pageHeight - screenHeight - sTop;
        return diff;
      }
      // 数据加载完成显示提示状态
      function loadDataEnd() {
        status.classList.remove('dn');
      }

      // 获取数据
      function getDate(remainder) {
        var html = ''
        if (remainder < 5 && isLoad) {
          axios({
            method: 'get',
            url: 'wap/transaction/ajaxList?page=' + page,
          }).then(function (res) {
            // 成功获取数据
            var tfList = res.data.tfList; getDate
            var num = res.data.size;
            for (var i = 0; i < tfList.length; i++) {
              html += template(tfList[i], page)
            }

            console.log(typeof page);
            num == 10 ? (page += 1, isLoad = true) : (isLoad = false, loadDataEnd())
            list.insertAdjacentHTML('beforeend', html)

          }).catch(function (err) {
            // 获取数据失败
            console.error(err);
            isLoad = true;
          });
          isLoad = false;
        }
      }
      // 初始化状态
      remainder = init();
      // 初始化加载数据
      getDate(remainder);
      // 滚动加载数据
      content.addEventListener('scroll', function () {
        remainder = init();
        getDate(remainder);
      })


      document.addEventListener('click', function (e) {
        var target = e.target
        if (target.classList.contains('btn-link')) {
          var pege = target.dataset.page
          var sTop = content.scrollTop
          window.history.replaceState({ page: pege, top: sTop }, '', '');
        }
      })

    }

    function setStorage(keyName, keyValue) {
      return localStorage.setItem(keyName, keyValue)
    }
    function getStorage(keyName) {
      return localStorage.getItem(keyName)
    }
    function removeStorage(keyName) {
      return localStorage.removeItem(keyName);
    }
    function template(v, page) {
      var html = '<div class="order-item bgwh g3"><div class="cell pt20 pb20"><div class="cell__bd f28 pl20 g3">' + v.id + '交易流水号:' + v.codePre + v.id + v.codeSuf + '</div>'
      html += '<div class="cell__fd b f26 text-danger">'
      if (v.type == "refund") {
        if (v.state == "00") {
          html += "未退款"
        } else if (v.state == "01") {
          html += "已退款"
        } else if (v.state == "02") {
          html += "已取消"
        }
      } else {
        if (v.state == "00") {
          html += "待付款"
        } else if (v.state == "01") {
          html += "已付款"
        } else if (v.state == "02") {
          html += "已取消"
        }
      }
      html += '</div></div><div class="cell pt20 pb20 pl20 ui-1px-t"><div class="cell__bd f28"><em class="g9">汇付识别码：</em><em class="g3 b">' + v.remittanceCode + '</em></div>' +
        '<div class="cell__fd f26"><em class="g9 f24">实收金额：</em><em class="g3 b f28">' + v.totalPrice + '</em></div></div>' +
        '<ul class="flow-type p20 ui-1px-t f26"><li class="clearfix g9"><span class="l">交易类型</span> <span class="r">'
      if (v.type == "consume") {
        html += "消费"
      } else if (v.type == "recharge") {
        html += "充值"
      } else if (v.type == "refund") {
        html += "退款"
      }
      html += '</span></li><li class="clearfix g9"><span class="l">下单时间</span><span class="r">' + v.createTime + '</span></li>'

      html += '<li class="clearfix g9"><span class="l">打款时间</span><span class="r">'
      if (v.state == "01") {
        html += v.finishTime
      } else {
        html += "未完成"
      }

      html += '</span></li>'

      html += '<li class="clearfix g9"><span class="l">'
      if (v.type == "refund") {
        html += "收款人"
      } else {
        html += "打款人"
      }
      html += '</span><span class="r">' + v.phone + '</span></li>'
      html += '</ul>' +
        '<div class="cell pt20 pb20 ml20 ui-1px-t"><div class="cell__bd f28 g3 tr"><a class="btn dib f24 g3 mr20 btn-link" href="wap/transaction/toVoucher?id=' + v.id + '" data-page=' + page + '>支付凭证</a></div></div></div>'
      return html;
    }
  </script>
</body>

</html>
